<template>
   <view class="load" v-if="!load">
		<u-loading-icon
			mode="circle"
			inactive-color="#fff"
			text="正在加载..."
			vertical
		></u-loading-icon>
	</view>
    <view v-else>
        <x-scroll :fixed="true" @onRefresh="onRefresh" @scrolltolower="scrolltolower" :refresh="_freshing">
            <view class="list " v-if="Array.isArray(list) && list.length > 0">
                <view class="item wap" v-for="item in list" :key="item.id">
                   <view class="cover">
                        <image :src="item.HeadImgUrl" mode="aspectFill" />
                   </view>
                   <view class="con">
                        <view class="name f1 c1">
                            {{item.Name || ""}} 
                            <view class="member member_he" v-if="getUserType(item.UserType) == 1 ">黑金卡</view>
                            <view class="member number_huan" v-if="getUserType(item.UserType) == 2">金卡</view>
                            <view class="member number_yin" v-if="getUserType(item.UserType) == 3">银卡</view>
                        </view>
                        <view class="time f2 c3">微信号:20***111</view>
                   </view>
                   <view class="btn_sm">查看</view>
                </view>
            </view>
            <block v-else>
					<u-empty mode="list" width="64"  height="64" icon="https://golfdate.oss-cn-shenzhen.aliyuncs.com/community/20230510114106.png" :show="true" iconSize="32" text="暂无好友"></u-empty>
			</block>
        </x-scroll>
    </view>
  
</template>

<script>
export default {
    data(){
        return{
            isLook:false,
            load:false,
            _freshing:true,
            newNum:0,
            list:[]
        }
    },
    onLoad(args) {
        // this.init();
    },
    onShow(){
        this.init();
    },
    methods:{
        onRefresh(){
            this.init();
        },
        async init(){
            let res = await this.$api.post('/Friend/MyViewWechatList');
            this.list = res.data.filter(item => {
                return item.UserID != uni.getStorageSync('user').UserID;
            })
            let res2 = await this.$api.post('/Friend/Apply');
            this.newNum = res2.data.length || 0;
            this.load = true;
        }
    },
    computed:{
        getUserType(l){
            return l => {
                if(l.indexOf('黑金') != -1){
                    return 1
                }else if(l.indexOf('金') != -1){
                    return 2
                }else if(l.indexOf('银') != -1){
                    return 3
                }else{
                    return 0
                }
            }
        },
        getOolineTime(time){
            return time => {
                console.log(time);
                let d = new Date(time).valueOf();
                return uni.$u.timeFrom(d);
            }
        }
    }
}
</script>

<style lang="scss">
.list{
    .item{
        display: flex;
        height: 140rpx;
        align-items: center;
        .cover{
            height: 100rpx;
            width: 100rpx;
            border-radius: 50%;
            overflow: hidden;
            border:1px solid #333;
            image{
              
                height: 100%;
                width: 100%;
            }
        }
        .con{
            padding-left: 20rpx;
            flex: 1;
            .time{
                margin-top: 10rpx;
            }
        }
        .btn_sm{
            width: 112rpx;
            height: 48rpx;   
            border-radius: 8rpx;
            line-height: 48rpx;
            text-align: center;
            background: #606060;
            color: #fff;
        }

        .member{
            display: inline-block;
            vertical-align: middle;
            width: 68rpx;
            height: 32rpx;
            background: linear-gradient(135deg, #7E7E7E 0%, #292929 100%);
            border-radius: 2px;
            border: 2px solid #D6C6AB;
            text-align: center;
            color: #fff;
            font-size: 16rpx;
            line-height: 32rpx;
            margin-left: 20rpx;
        }
        .number_huan{
            color: #4C310C;
            background: linear-gradient(180deg, #FDF9F6 0%, #E1C4A6 100%);
            border: 2rpx solid #E6CEB5;
        }
        .number_yin{
            color: #4C310C;
            background: linear-gradient(180deg, #c9daf8 0%, #E1C4A6 100%);
            border: 2rpx solid #E6CEB5;
        }


    }
    .add{
        //  background: linear-gradient(90deg, #212121 0%, #313131 100%);
         .cover{
            display: flex;
            align-items: center;
            justify-content: center;
           
            image{
                height: 70%;
                width: 70%;
            }
        }
        .nums{
            height: 45rpx;
            width: 45rpx;
            border-radius: 50%;
            background: #f00;
            color: #fff;
            text-align: center;
            line-height: 40rpx;
        }
    }
}
</style>